{{extend './layout.htm'}}

{{block 'css'}}
<style>
    .title img {
        height: 30px;
        margin-right: 10px;
    }
</style>
{{/block}}

{{block 'main'}}
<form class="layui-form table-tools">
    <div class="layui-input-inline select">
        <select name="cate_id">
            <option value="0">栏目</option>
            {{each cate_list item}}
            <option value="{{item.id}}" {{(item.id == cate_id) && 'selected'}}>{{item.cate_name}}</option>{{/each}}
        </select>
    </div>
    <div class="sp10"></div>
    <div class="layui-input-inline input">
        <input type="text" name="keyword" value="{{keyword}}" autocomplete="off" class="layui-input" placeholder="请输入关键词">
    </div>
    <div class="sp5"></div>
    <div class="layui-input-inline">
        <button type="submit" class="layui-btn" lay-submit>搜索</button>
    </div>
    <div class="sp10 iframe-hide"></div>
    <div class="layui-input-inline">
        <a href="{{url('article/form')}}" class="layui-btn iframe-hide">新增</a>
    </div>
</form>
<div class="table-wrap">
    <table class="layui-table">
        <thead>
            <tr><th>ID</th><th>标题</th><th>栏目</th><th>点击</th><th>时间</th><th>操作</th></tr> 
        </thead>
        <tbody>
            {{each list item}}
            <tr>
                <td>{{item.id}}</td>
                <td class="title">{{@item.thumb && '<img src="'+item.thumb+'" />'}}<a href="{{url(':article', {id: item.id})}}" target="blank">{{item.title}}</a></td>
                <td>{{item.cate_name}}</td>
                <td>{{item.click}}</td>
                <td>{{item.add_time | dateFormat 'YYYY-mm-dd HH:ii'}}</td>
                <td class="table-action" data-id="{{item.id}}" data-title="{{item.title}}" data-thumb="{{item.thumb}}"><a href="{{url('form', {id: item.id})}}" class="layui-btn layui-btn-sm iframe-hide">编辑</a><a href="{{url('delete', {id: item.id})}}" class="layui-btn layui-btn-danger layui-btn-sm iframe-hide">删除</a></td>
            </tr>{{/each}}
        </tbody>
    </table>
</div>
{{@pagination}}
{{/block}}

{{block 'js'}}
<script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;

        $('a.layui-btn-danger').each(function(){
            var url = $(this).attr('href');
            $(this).attr('href', 'javascript:;').click(function () {
                layer.confirm("确定删除吗？", function(index){
                    layer.close(index);
                    $.get(url, function(re){
                        if(re.state){
                            layer.msg(re.msg, function(){
                                history.go(0);
                            });
                        }else{
                            layer.msg(re.msg);
                        }
                    });
                });
            });
        });
    });

    // iframe调用
    $(function(){
        if(window != parent) {
            var cb = "{{callback}}";
            $('<style>body>header,.iframe-hide{display:none;}.table-wrap{height:250px;overflow-y:overlay;}.table-wrap::-webkit-scrollbar{width:6px;}.table-wrap::-webkit-scrollbar-thumb{background-color:#ddd;cursor:pointer;}.table-wrap .layui-table td.title{padding-top:5px;padding-bottom:5px;white-space:normal;word-break:break-all;min-width:auto;line-height:16px;font-size:13px;}.table-wrap .layui-table td.title img{height:32px;margin-right:5px;float:left;}</style>').appendTo($('head'));
            $(".layui-table tr>*:nth-child(3)").hide();
            $(".layui-table tr>*:nth-child(4)").hide();
            $(".layui-table tr>*:nth-child(5)").hide();
            $(".table-action").each(function() {
                var that = $(this);
                $('<span class="layui-btn layui-btn-sm">选择</span>').click(function() {
                    if(typeof parent[cb] == 'function') {
                        parent[cb]({
                            id: that.data('id'),
                            title: that.data('title'),
                            thumb: that.data('thumb')
                        });
                    } else {
                        layer.msg('父窗口callback函数未定义！');
                    }
                }).prependTo(that);
            });
        }
    });
</script>
{{/block}}